<template>
  <div>
    <!--    集群管理-->
    <div style="margin-bottom: 16px">
      <a-space>
        <a-button type="primary" @click="addK8SCluster">注册集群</a-button>
        <a-button
          type="danger"
          @click="removeCluster"
          :disabled="selectedRowKeys.length <= 0"
          >批量删除</a-button
        >
      </a-space>
    </div>
    <a-table
      :row-selection="rowSelection"
      :columns="columns"
      :data-source="data"
      rowKey="id"
    >
      <span slot="nodeNumber" slot-scope="nodeNumber">
        <a-tag color="geekblue">{{ nodeNumber }}</a-tag>
      </span>
    </a-table>
    <!--     分页-->
    <!--    <div>-->
    <!--      <a-pagination-->
    <!--        :total="85"-->
    <!--        :show-total="total => `共${total}条`"-->
    <!--        :page-size="20"-->
    <!--        :default-current="1"-->
    <!--      />-->
    <!--    </div>-->
    <!-- 添加集群对话框 -->
    <a-modal v-model="visible" title="添加集群" on-ok="onSubmit">
      <template slot="footer">
        <a-button key="cancle" @click="resetForm('formState')"> 取消 </a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="onSubmit"
        >
          确认
        </a-button>
      </template>
      <a-form-model ref="formState" :model="formState">
        <a-form-model-item
          label="集群名称"
          name="k8sClusterName"
          prop="k8sClusterName"
        >
          <a-input
            v-model="formState.k8sClusterName"
            placeholder="请输入集群名称"
          />
        </a-form-model-item>
        <a-form-model-item
          label="集群凭证"
          name="k8sClusterConfig"
          prop="k8sClusterConfig"
        >
          <a-textarea
            v-model="formState.k8sClusterConfig"
            placeholder="请粘贴KubeConfig内容"
            style="width: 100%; height: 300px"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import axios from "axios";
const columns = [
  {
    title: "集群名称",
    dataIndex: "clusterName",
  },
  {
    title: "集群版本",
    dataIndex: "clusterVersion",
  },
  {
    title: "节点数量",
    dataIndex: "nodeNumber",
    scopedSlots: { customRender: "nodeNumber" },
  },
  // {
  //   title: "集群凭证",
  //   // dataIndex: 'kubeConfig',
  // },
  {
    title: "创建时间",
    dataIndex: "CreatedAt",
  },
  // {
  //   title: "操作",
  //   // dataIndex: 'action ',
  // },
];

const data = [];

export default {
  data() {
    return {
      formState: {
        k8sClusterName: undefined,
        k8sClusterVersion: "",
        k8sClusterConfig: undefined,
      },
      confirmLoading: false,
      loading: false,
      visible: false,
      data,
      columns,
      selectedRowKeys: [], // Check here to configure the default column
    };
  },
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this;
      return {
        selectedRowKeys,
        onChange: this.onSelectChange,
        hideDefaultSelections: true,
        selections: [
          {
            key: "all-data",
            text: "Select All Data",
            onSelect: () => {
              this.selectedRowKeys = [...Array(46).keys()]; // 0...45
            },
          },
          {
            key: "odd",
            text: "Select Odd Row",
            onSelect: (changableRowKeys) => {
              let newSelectedRowKeys = [];
              newSelectedRowKeys = changableRowKeys.filter((key, index) => {
                if (index % 2 !== 0) {
                  return false;
                }
                return true;
              });
              this.selectedRowKeys = newSelectedRowKeys;
            },
          },
          {
            key: "even",
            text: "Select Even Row",
            onSelect: (changableRowKeys) => {
              let newSelectedRowKeys = [];
              newSelectedRowKeys = changableRowKeys.filter((key, index) => {
                if (index % 2 !== 0) {
                  return true;
                }
                return false;
              });
              this.selectedRowKeys = newSelectedRowKeys;
            },
          },
        ],
        onSelection: this.onSelection,
      };
    },
  },
  mounted() {
    this.getK8SCluster();
  },
  methods: {
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    addK8SCluster() {
      this.visible = true;
    },

    // 提交添加的集群
    onSubmit() {
      const that = this;
      that.loading = true;
      axios
        .post("http://localhost:5000/api/v1/k8s/cluster", {
          clusterName: that.formState.k8sClusterName,
          kubeConfig: that.formState.k8sClusterConfig,
          clusterVersion: that.formState.k8sClusterVersion,
        })
        .then((res) => {
          console.log(res.data);
        });
      that.confirmLoading = true;
      setTimeout(() => {
        that.visible = false;
        that.loading = false;
        that.confirmLoading = false;
      }, 2000);
      setTimeout(() => {
        that.$refs["formState"].resetFields();
      }, 2100);
    },

    // 重置添加集群表单
    resetForm(formName) {
      this.visible = false;
      setTimeout(() => {
        //设置延迟执行
        this.$refs[formName].resetFields();
      }, 100);
    },

    // 获取集群列表
    getK8SCluster() {
      const that = this;
      axios.get("http://localhost:5000/api/v1/k8s/cluster").then((res) => {
        that.data = res.data.data.data;
        // console.log(res.data);
      });
    },

    // 批量删除集群
    removeCluster() {
      const that = this;
      let clusterIds = [];
      for (let i = 0; i < that.selectedRowKeys.length; i++) {
        clusterIds.push(that.selectedRowKeys[i]);
      }
      axios
        .post("http://localhost:5000/api/v1/k8s/cluster/delete", {
          clusterIds: clusterIds,
        })
        .then((res) => {
          // console.log(res);
          // console.log(res.data);
          if (res.data.errCode === 0) {
            that.$message.success("删除成功");
            that.getK8SCluster();
          } else {
            that.$message.error("删除失败");
          }
        });
    },
  },
};
</script>
